使用图像 (Image) 节点

图像 (Image) 节点可用于显示位图图像。

使用图像文件将位图资产引入Kanzi Studio。您可使用以下文件格式将图像导入 Kanzi：

.png，包括阿尔法通道
.tga，包括阿尔法通道
.psd，包括图层。请参阅导入包含图层的 Adobe Photoshop 文件。
.dds，可以包含环境贴图、mipmap 或两者兼有
.bmp、.exr、.gif、.hdr、.ico、.iff、.jng、.jpg、.jpeg、.jif、.mng、.pcx、.pmb、.pgm、.ppm、.pfm、.pict、.ras、.sgi、.tiff、.tif、.wbmp、.xmb 和 .xpm

为了获得最佳的应用程序性能，请确保在您的 Kanzi Studio 工程中正确建立图像。请参阅图像和纹理最佳实践。

创建图像 (Image) 节点

要创建图像 (Image) 节点：

在资产 (Assets) 窗口，点击导入资产 (Import Assets)。
选择要导入的文件，然后点击打开 (Open)。

将图像从资产 (Assets) 拖放到预览 (Preview) 中，或者拖放到工程 (Project) 中的场景图中的任何 2D 节点中。
（可选）对于您使用的图像，您可以设置最适合您应用程序的目标格式。请参阅设置图像的目标格式。

或

在工程 (Project) 中按下 Alt 并右键点击要在其中创建图像 (Image) 节点的那个节点，然后选择图像 (Image)。
请注意，只能在 3D 节点内创建 3D 节点，只能在 2D 节点内创建 2D 节点。
在属性 (Properties) 中，将图像 (Image) 属性设置为您希望图像 (Image) 节点显示的图像。
图像 (Image) 节点会继承图像 (Image) 属性中设置的图像宽度和高度。要设置其他大小，请添加并设置属性：
- 布局宽度 (Layout Width) 和布局高度 (Layout Height)，以设置图像 (Image) 节点的大小。
- 内容拉伸 (Content Stretch)，以设置 Kanzi 如何拉伸图像 (Image) 节点的内容。
（可选）设置水平对齐 (Horizontal Alignment) 和垂直对齐 (Vertical Alignment) 属性，以设置图像位置。
（可选）对于您使用的图像，您可以设置最适合您应用程序的目标格式。请参阅设置图像的目标格式。

设置图像的目标格式

将工程导出到 kzb 文件时，Kanzi Studio 使用原始图像的格式读取工程中的图像，并以您为每个图像的目标格式 (Target Format) 属性设置的格式将写入 kzb 文件。

如果原始图像的文件格式与您在目标格式 (Target Format) 属性中选择的格式相同，Kanzi Studio 在以下条件下将图像写入 kzb 文件时不会修改图像：

预乘阿尔法 (Premultiply Alpha) 已禁用，或阿尔法通道不需要预乘
要更改此设置，在工程 (Project) > 属性 (Properties) 中使用预乘阿尔法 (Premultiply Alpha) 属性。您可以重写想要使用不同设置的图像文件中的该属性值。
生成 Mipmap (Generate Mipmaps) 已禁用
您可以在每个图像文件中设置生成 Mipmap (Generate Mipmaps) 属性的值。
向上取整图像尺寸至数值最接近的 2 的幂 (Round up Image Dimensions to Nearest Power of Two)属性已禁用
您可以在工程 (Project) > 属性 (Properties) 中设置向上取整图像尺寸至数值最接近的 2 的幂 (Round up Image Dimensions to Nearest Power of Two) 属性的值。
如启用向上取整图像尺寸至数值最接近的 2 的幂 (Round up Image Dimensions to Nearest Power of Two) 属性，Kanzi Studio 将在 kzb 文件导出过程中，对工程中所有图像的长度和宽度做向上取整，取数值最为接近的 2 的幂。例如，Kanzi Studio 会将一张大小为 40×30 像素的图像，以 64×32 像素大小导出到 kzb 文件中。

如果您的图像是 JPEG 或 PNG 格式，而您不想让Kanzi Studio 修改其导出到 kzb 文件的图像，在图像属性 (Properties) 中启用使用原始图像 (Use Original Image) 属性。

要设置图像目标格式：

在素材库 (Library) > 资源文件 (Resource Files) > 图像 (Images) 中选择您要为其设置目标格式的图像。
在属性 (Properties) 中将目标格式 (Target Format) 属性设为要在Kanzi 应用程序中使用的图像格式。
您选择的格式很重要，因为这会影响 kzb 文件的大小以及 Kanzi 应用程序加载图像时的加载时间。确保您的目标设备支持您为图像选择的目标格式。请参阅图像和纹理最佳实践以及压缩纹理。
如果您在上一步中选择的图像格式支持压缩，请配置要使用的压缩方案。请参阅压缩纹理。

使用 PNG 压缩

在使用 PNG 压缩时，请记住，因为压缩的 PNG 图像不会以压缩格式进入 GPU，所以 PNG 压缩会影响 PNG 图像数据从 kzb 文件到设备内存的加载。

使用 PNG 压缩来存储和加载 kzb 文件中的图像。为提高应用程序的性能，考虑使用 Kanzi 可以直接发送已压缩格式到设备 GPU 的图像格式。请参阅压缩纹理。

要使用 PNG 压缩：

在Kanzi Studio 的素材库 (Library) 中，选择资源文件 (Resource Files) > 图像 (Images)，然后选择您要应用压缩的图像。
在属性 (Properties) 中，将目标格式 (Target Format) 设置为PNG。
在属性 (Properties) 中，将PNG 压缩级别 (PNG Compression Level) 属性设置为您要用于图像的压缩：
- 工程默认值 (Project default) 使用在工程 (Project) > 属性 (Properties) 的PNG 压缩级别 (PNG Compression Level) 属性中设置的 PNG 压缩
- 无压缩 (No compression) 不使用图像压缩
- 最佳压缩速度（zlib 级别 1）(Best compression speed, zlib level 1)创建的文件较大，但压缩较快
- 默认值（zlib 级别 6）(Default, zlib level 6) 创建的文件较小，但压缩耗时较长。这是 Kanzi Studio 用于 PNG 图像的 FreeImage 库的默认选项。
- 最佳压缩（zlib 级别 9）(Best compression, zlib level 9) 创建的文件最小，但压缩耗时最长
建议
您可以在每个图像文件的工程 (Project) > 属性 (Properties) 和属性中设置PNG 压缩级别 (PNG Compression Level) 属性的值。

应用自定义渲染到图像 (Image) 节点

应用自定义渲染到图像 (Image) 节点，以创建后处理效果。例如，您可以将 2D 节点中的颜色图像转换为灰度。

要应用自定义渲染到图像 (Image) 节点，使用前景笔刷 (Foreground Brush) 属性通过材质笔刷 (Material Brush) 在屏幕上渲染节点。例如，要渲染节点内容，如图像 (Image) 节点中的图像或 2D 文本块 (Text Block 2D) 节点中的文本，使用前景笔刷 (Foreground Brush) 属性。

要应用自定义渲染到图像 (Image) 节点：

创建您要应用自定义渲染的材质。
例如，要创建一个用于将颜色转换为灰度的材质：
1. 在素材库 (Library) 中，按下 Alt 并右键点击材质和纹理 (Materials and Textures) 并选择材质类型 (Material Type)。
  Kanzi Studio 创建材质类型以及使用该材质类型的材质。
2. 在素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) 中，展开您创建的材质类型，双击顶点着色器 (Vertex Shader) 以在着色器源编辑器 (Shader Source Editor) 中打开，将现有的着色器代码替换为代码，然后保存着色器。
```
attribute vec3 kzPosition;
attribute vec2 kzTextureCoordinate0;
uniform highp mat4 kzProjectionCameraWorldMatrix;

varying mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    vTexCoord = kzTextureCoordinate0;
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}
```
3. 打开片段着色器 (Fragment Shader) 并将现有的着色器代码替换为这一步骤中的代码，然后保存着色器。
  在着色器中，使用以下 Kanzi 默认 uniform：
  - ContentTexture 以定义渲染节点在渲染时提供的纹理
  - RenderOpacity 以定义渲染节点的不透明度
  请参阅着色器 uniform。
```
uniform sampler2D ContentTexture;
varying mediump vec2 vTexCoord;
uniform lowp float RenderOpacity;

void main()
{
    precision mediump float;
    //使用此算法可以将 2D 节点使用的
    //纹理中的颜色转换为灰度。
    //要整合到 Kanzi 渲染管道，着色器必须输出
    //预乘阿尔法。
    vec4 color = texture2D(ContentTexture, vTexCoord);
    float grayscale = dot(color.rgb, vec3(0.21, 0.72, 0.07));
    float alpha = color.a * RenderOpacity;
    vec3 premultipliedColor = vec3(grayscale) * alpha;
    gl_FragColor = vec4(premultipliedColor, alpha);
}
```
在素材库 (Library) 按下 Alt 并右键点击材质和纹理 (Materials and Textures) 中，选择材质笔刷 (Material Brush)，并将其设置为使用您在上一步中创建的材质。
在工程 (Project) 中，创建或选择要对其应用您创建的材质的图像 (Image) 节点，并设置该节点显示图像。
在属性 (Properties) 中，为图像 (Image) 节点添加前景笔刷 (Foreground Brush) 属性，并将其设置为一个材质笔刷，材质笔刷应使用您要对节点应用的材质。
（可选）设置图像混合：
1. 在素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) 中选择您创建的材质类型，在属性 (Properties) 中点击属性类型 (Property Types) 下拉菜单，选择混合模式 (Blend Mode) 并点击同步 uniform (Sync with Uniforms)。
  这样即可添加混合模式 (Blend Mode) 属性到使用此材质类型的材质中。
2. 在属性 (Properties) 中，在以下任一位置添加并设置混合模式 (Blend Mode) 属性：
  - 材质笔刷 (Material Brush)，使用添加了混合模式 (Blend Mode) 属性的材质
  - 使用材质笔刷 (Material Brush) 的图像 (Image) 节点
  例如，在工程 (Project) 中选择图像 (Image) 节点，在属性 (Properties) 中添加混合模式 (Blend Mode) 属性，将其设为阿尔法: 预乘 (Alpha: Premultiplied)。
（可选）要调整图像的半透明度，在工程 (Project) 中选择图像 (Image) 节点，并在属性 (Properties) 中添加并设置不透明度 (Opacity) 属性。